<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <link rel="stylesheet" type="text/css" href="../static/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../static/easyui/themes/icon.css">
    <script src="../static/js/jquery.min.js"></script>
    <script type="text/javascript" src="../static/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../static/easyui/locale/easyui-lang-zh_CN.js"></script>
</head>
<body style="background: #f2f4f8;">
    <div align="center">
        <h2>
            用户注册
        </h2>
        <table style="border-collapse: separate; border-spacing: 0px 10px;">
            <tr>
                <td><span id="errorTips" style="color: red"></span></td>
            </tr>
            <tr>
                <td><span id="passTips" style="color: green"></span></td>
            </tr>
            <tr>
                <td>用户名： <input class="easyui-textbox" prompt="用户名"
                               id="username" iconWidth="28">
                    <a href="javascript:void(0)" class="easyui-linkbutton" id="chekU"
                       onclick="chekUserName()">--查看用户名是否可用--</a>
                </td>
            </tr>
            <tr>
                <td>密码： <input class="easyui-passwordbox" prompt="密码"
                               id="password" iconWidth="28">
                </td>
            </tr>
            <tr>
                <td>确认密码： <input class="easyui-passwordbox" prompt="确认密码"
                               id="quepwd" iconWidth="28">
                </td>
            </tr>
            <tr>
                <td>手机号： <input class="easyui-textbox" prompt="手机号"
                                id="phone" iconWidth="28"> <input type="text" id="diyCode" class="easyui-textbox" prompt="验证码">
                    <a href="javascript:void(0)" class="easyui-linkbutton"
                       onclick="getCode()">--获取验证码--</a>
                </td>
            </tr>

            <tr align="center">
                <td><a href="javascript:void(0)" class="easyui-linkbutton"
                       onclick="submitForm()">--立即注册--</a>&nbsp;
                    <a href="/api/account/index" class="easyui-linkbutton"
                    >--去登录--</a>
                </td>
            </tr>
        </table>
    </div>
</body>
<script type="text/javascript">

    var code = '';

    function getCode() {
        var phone = $('#phone').val();
        if (phone != null && phone != ''&& phone.length == 11){
            $.ajax({
                type: "GET",
                url: '/api/user/sendSms/' + phone,
                dataType: "JSON",
                success: function (res) {

                    if (res.code == 100){
                        $('#passTips').text(res.message);
                        code = res.data;
                    } else {
                        $('#errorTips').text(res.message);
                        return
                    }
                }

            })
        }else{
            $('#errorTips').text('请填写正确手机号');
        }
    }


    function chekUserName() {
        $("#chekU").attr('disabled',true);
        var username = $('#username').val();
        if (username != null && username != ''){
            $.ajax({
                type: "GET",
                url: '/api/user/register/chekUsername/'+username,
                dataType: "JSON",
                success: function (res) {
                    if (res.code == 100){
                        $('#passTips').text(res.message);
                    } else {
                        $('#errorTips').text(res.message);
                        return
                    }
                }
            })
        } else{
            $('#errorTips').text("请填写用户名");
        }
    }


    function submitForm(){
        chekUserName();
        var pwd = $('#password').val();
        var qwd = $('#quepwd').val();
        var mobile = $('#phone').val();

        $('#errorTips').text('');

        if (pwd != qwd){
            $('#errorTips').text("两次密码不一致");
            return
        }else {
            var diyCode = $('#diyCode').val();

            if (diyCode== null || code == '' || diyCode != code){
                $('#errorTips').text("验证码不正确");
                return
            }else {
                var username = $('#username').val();
                var json = {
                    "username" : username,
                    "pwd" : pwd,
                    "mobile" : mobile
                };
                $.ajax({
                    url: '/api/user/register/savaUser',
                    data: JSON.stringify(json),
                    dataType: 'JSON',
                    contentType : "application/json",
                    type: 'POST',
                    success: function (res) {
                        if (res.code == 100){
                            window.location.href = "/api/account/index";
                        } else {
                            $('#errorTips').text(res.message);
                        }
                    }
                })
            }
        }



    }





</script>
</html>